<template>
<!--  <div class="title">最新采样结果</div>-->
<!--    <div class="table">
      <vue3-seamless-scroll :list="tableData" :hover="true" ease="ease-in-out" :step="0.5">
        <el-row  v-for="(item, index) in tableData" :key="index">
          <el-col :span="4">
            <span class="label">场所位置:</span>
            <span class="value">{{item.placeLocation}}</span>
          </el-col>
          <el-col :span="5">
            <span class="label">扫码时间:</span>
            <span class="value">{{item.scancodeDate}}</span>
          </el-col>
          <el-col :span="5">
            <span class="label">场所类型:</span>
            <span class="value">{{item.cstype}}</span>
          </el-col>
          <el-col :span="5">
            <span class="label">场所名称:</span>
            <span class="value">{{item.placeName}}</span>
          </el-col>
          <el-col :span="5">
            <span class="label">健康码状态:</span>
            <span class="value">{{item.healthcodeStatus}}</span>
          </el-col>
        </el-row>
      </vue3-seamless-scroll>
    </div>-->
    <div class="line">
      <div style="flex: 1">场所位置</div>
      <div style="flex: 1">扫码时间</div>
      <div style="flex: 0.8">场所类型</div>
      <div style="flex: 1">场所名称</div>
      <div style="flex: 0.5">健康码状态</div>
    </div>
    <div class="table_body" ref="tableList" id="tableList">
      <div
        :class="{line:true,lineColor: index % 2 === 1 }"
        v-for="(item, index) in tableData"
        :key="index"
        ref="tableRef"
      >
        <div style="flex: 1;">
          {{ item.placeLocation }}
        </div>
        <div style="flex: 1">
          {{ item.scancodeDate }}
        </div>
        <div style="flex: 0.8" class="overLine">
            {{ item.cstype }}
        </div>
        <div style="flex: 1">
          {{item.placeName}}
        </div>
        <div style="flex: 0.5" class="overLine">
            {{ item.healthcodeStatus }}
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: "access",
  props:{
    param:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    param:{
      deep:true,
      immediate:true,
      handler:function(val){
        if (val!==undefined){
          this.tableData=val
        }
      }
    }
  },
  data(){
    return{
      tableData:[
      ]
    }
  },
  mounted() {
    this.autoScroll();
  },
  methods:{
    autoScroll() {
      const el = this.$refs.tableList
      const elHeight = el.offsetHeight;
      const sHeight = el.scrollHeight;
      setInterval(() => {
        if (el.scrollTop < sHeight - elHeight) {
          el.scrollTop++;
        } else {
          el.scrollTop = 0;
        }
      }, 50);
    }
  }
};
</script>

<style lang="less" scoped>
.table_icon{
  margin-right: 10px;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  font-size: 18px;
  color: #FFFFFF;
  opacity: 0.6;
div {
  text-align: center;
  color:#FFFFFF
}
}
.table_body{
.line{
  font-size: 18px;
  opacity: 0.8 !important;
}
}
.lineColor {
  background-color: #2a64b1;
}
.overLine{
  overflow:hidden;
  white-space: nowrap;
  word-break:break-all;
  word-wrap:break-word;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.table_body{
  height: 400px;
  overflow: auto;
}
</style>
